<template>
  <div class="box">
    <button class="my-button" @click="increment">result {{ count }}</button>

    <button class="my-button" @click="incrementAge">age: {{ age }}</button>
  </div>
</template>

<!-- 组合式api setup语法糖 -->
<!-- 不再需要export default, setup()方法, 以及return -->
<script setup>

import { ref, watch } from 'vue'
const count = ref(0)
const age = ref(18)
const objCount = ref({
  count: 2
})


const increment = () => {
  count.value++
}

const incrementAge = () => {
  age.value++
}

// 监听count的变化
/*
watch(count, (newVal, oldVal) => {
  console.log('new value:', newVal)
  console.log('old value:', oldVal)
})
*/

/*
watch([count,age], (newVal, oldVal) => {
  console.log('new value:', newVal)
  console.log('old value:', oldVal)
})
*/

watch([count, age, objCount], (newVal, oldVal) => {
  console.log('new value:', newVal)
  console.log('old value:', oldVal)
}, {
  immediate: true, // 立即监听,也就是进入页面的时间就监听(刷新页面)
  deep: true // 像objCount这种对象类型的ref需要使用deep才能监听到
}) 




</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.my-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
</style>
